<template>
	<view class="content">
		<!-- #ifdef APP -->
		<NavBarCommon></NavBarCommon>
		<!-- #endif -->
		<view class="headerBox">
			<view class="leftBox" @click="goUserInfo">
				<image src="/static/home/one.png" class="oneImage" />
				<view class="hello">hi , NASY</view>
			</view>
			<view class="rightBox">
				<view class="lang">
					<p class="address" @click="ConnectYourWallet">
						{{ publicKey ? formatPublicKey(publicKey) : "连接钱包" }}
					</p>
					<view class="addressBox">
						<view class="address1"> | EN </view>
						<image src="/static/home/three.png" class="twoImage" @click="togglePopup" />
						<view v-if="popupVisible" class="popup" @click="whitePopup">
							<view class="popup-content">
								<view class="china">中文</view>
								<view class="en">English</view>
								<!-- <view class="langOne">印尼</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="swystemBox">
			<view class="swystem">
				<image src="../../static/home/two.png" class="threeImage" />
				<view class="swystem1">系统公告</view>
				<view class="" style="color: white;margin-left: 20rpx;">
					....................
				</view>
			</view>
		</view>
		<view class="boxOne" style="margin: 30rpx;">
			<!-- <image src="/static/home/banner.png" class="banner1" /> -->
			<u-swiper :list="bannerList" height="187"></u-swiper>
		</view>
		<view class="myBox">
			<view class="my">我的资产</view>
			<image src="../../static/home/eye1.png" @click="hideMony" class="eyes" />
		</view>
		<view class="boxTwo">
			<view class="zeroBox">
				<view class="zero" v-if="hideMonyShow">{{ solLimit }}.NASY</view>
				<view class="zero" v-else style="width: 286rpx;">******</view>
			</view>
			<view class="zero1" v-if="false">
				<view class="c">NASY</view>
				<image src="../../static/home/down.png" class="down1" />
			</view>
		</view>
		<view class="boxThree">
			<view class="Rewards">持币奖励</view>
			<view class="Rewards1" @click="rewardRecord">奖励记录 ></view>
		</view>
		<view class="boxFour">
			<view class="fourLeft">
				<view class="fourOne">排名</view>
				<view class="fourTwo">总奖励</view>
				<view class="fourThree">已获得</view>
				<view class="fourPut">待释放</view>
				<view class="fourFive">距离上一名</view>
			</view>
			<view class="" style="height: 22rpx;">

			</view>
			<view class="fourRight">
				<image v-if="holdRewards.rank == 1" src="/static/my/one.png" alt="" class="fourOne" />
				<image v-if="holdRewards.rank == 2" src="/static/my/two.png" alt="" class="fourOne" />
				<image v-if="holdRewards.rank == 3" src="/static/my/three.png" alt="" class="fourOne" />
				<image v-if="holdRewards.rank == 4" src="/static/my/four.png" alt="" class="fourOne" />
				<image v-if="holdRewards.rank == 5" src="/static/my/five.png" alt="" class="fourOne" />
				<image v-if="holdRewards.rank == 6" src="/static/my/six.png" alt="" class="fourOne" />
				<image v-if="holdRewards.rank == 7" src="/static/my/seven.png" alt="" class="fourOne" />
				<image v-if="holdRewards.rank == 8" src="/static/my/eight.png" alt="" class="fourOne" />
				<image v-if="holdRewards.rank == 9" src="/static/my/nine.png" alt="" class="fourOne" />
				<image v-if="holdRewards.rank == 10" src="/static/my/ten.png" alt="" class="fourOne" />
				<view v-if="holdRewards.rank == '0'" class="fourOne" style="text-align: center;font-size: 12px;">
					无
				</view>
				<view class="fourTwo">
					<text class="" v-if="holdRewards.totalHolderReward == ''">---</text>
					<text class="" v-else>
						{{ Number(holdRewards.totalHolderReward).toFixed(5) }}
					</text>
				</view>
				<view class="fourThree">
					<text class="" v-if="holdRewards.earnedRewards == ''">---</text>
					<text class="" v-else>
						{{ Number(holdRewards.earnedRewards).toFixed(5) }}
					</text>
					<!-- 
					{{ isString(holdRewards.earnedRewards) ? holdRewards.earnedRewards : Number(
						holdRewards.earnedRewards).toFixed(5) }} -->
				</view>
				<view class="fourPut">
					<text class="" v-if="holdRewards.pendingRewards == ''">---</text>
					<text class="" v-else>
						{{ Number(holdRewards.pendingRewards).toFixed(5) }}
					</text>
				</view>
				<div class="progress-container" :style="customStyles">
					<!-- <div class="progress-bar" id="progressBar">
						<span class="progress-text" id="progressText">5%</span>
					</div> -->
				</div>
			</view>
		</view>
		<view class="boxFive">
			<view class="force">算力挖矿</view>
			<view class="force1" @click="releaseRecord">释放记录 ></view>
		</view>
		<view class="boxSix">
			<view class="earningsBox">
				<view class="flex" style="display: flex;align-items: end;">
					<view class="earnings">挖矿收益</view>
					<view class="" v-if="current_stage_number > 0"
						style="font-size: 14px; line-height: 14px;border: 1px solid;border-radius: 25rpx;padding: 5px;margin-left: 10px;color: white;">
						挖矿中
					</view>
					<view class="" v-else
						style="font-size: 14px; line-height: 14px;border: 1px solid;border-radius: 25rpx;padding: 5px;margin-left: 10px;color: white;">
						未挖矿
					</view>
				</view>

				<image src="/static/home/six.png" class="whitePic" />
			</view>
			<view class="dayBox">
				<view class="day">
					<view class="math1">{{ earnedRewards == '----' ? earnedRewards : Number(earnedRewards).toFixed(2) }}
					</view>
					<view class="math2">今日收益</view>
				</view>
				<view class="day2">
					<view class="math3">
						{{ pendingRewards == '----' ? pendingRewards : Number(pendingRewards).toFixed(2) }}</view>
					<view class="math4">待释放</view>
				</view>
			</view>
			<view class="blueBox" v-if="remaining_days">
				<view class="oneDay">
					<view class="time1">{{ remaining_days }}</view>
					<view class="time2">天 </view>
				</view>
				<view class="twoDay">
					<view class="time1">{{ hours }}</view>
					<view class="time2">时</view>
				</view>
				<view class="threeDay">
					<view class="time1">{{ minutes }}</view>
					<view class="time2">分</view>
				</view>
				<view class="fourDay">
					<view class="time1">{{ seconds }}</view>
					<view class="time2">秒</view>
				</view>
			</view>
			<view class="" style="height: 60rpx;">
			</view>

			<!-- v-if="remaining_days" -->
			<view class="intoBox" :style="customStageStyles" v-if="current_stage_number > 0">
				<!-- v-if="current_stage_number == 1" -->
				<image class="chestBlue" src="/static/home/ChestBlue.png" alt="" />
				<!-- v-if="current_stage_number == 2" -->
				<image class="chestRed animate__zoomIn  animated" @click="open" 
					src="/static/home/ChestRed.png" alt="" />
			</view>
			<view class="" style="height: 60rpx;">
			</view>
		</view>


		<!--  -->
		<view class="copyBox" v-if="false">
			<view class="copyBox1">
				<image src="/static/home/five.png" class="copy3" />
				<view class="copy1"> 邀请链接：{{ invitedUrl }} </view>
				<view class="copy2" @click="copyUrlHandle">复制</view>
			</view>
		</view>


		<!-- bannder -->
		<view class="  " style="justify-content: center;display: flex;" v-if="true">
			<image src="/static/home/kong.png" @click="goKong" style="height:180px;width: 335rpx;" />
			<view class="" style="width: 20rpx;"></view>
			<image src="/static/home/inviteCode.png" @click="goInvaint" style="height:180px;width: 335rpx;" />
		</view>
		<u-gap height="10"></u-gap>
		<!-- bannder -->
		<view class="" style="height:300rpx;width: 690rpx;margin: 0 auto;" @click="goPay">
			<view class="copyBoxBg">
				<view class="title" style="font-weight: bold;color: white;padding-top: 34rpx;padding-left: 30rpx;">
					充值对话
				</view>
				<u-gap height="35"></u-gap>
				<view class="flex " style="margin: 0px 20px;">
					<!-- 825CE0 -->
					<!-- 		modelVale: 0,
				target: 50, -->
					<!--  -->
					<!-- strokeColor='#825CE0' -->
	<!-- 				<view class="" style="color: #fff;">
						{{hasexchange * 100}}
						{{model.all}}
					</view> -->
		
					<l-circle strokeColor='#825CE0' :current.sync="model.all" :percent="hasexchange * 100" size='60px'>
						<text style="color: #fff;">
						{{ hasexchange * 100}}%</text>
					</l-circle>
					<view class=""
						style="display: flex;flex-direction: column;margin: 0 20rpx;align-items: stretch;justify-content: space-around;">
						<view class="" style="color: white;font-weight: bold;">
							已兑换
						</view>
						<view class="">
							<text style="color: #91DAFD;font-size: 12px;">NASY</text>
							<text style="color: #91DAFD;font-size: 14px;font-weight: bold;">{{hasexchange *100 || 0}}</text>
						</view>
					</view>
					<view class=""
						style="display: flex;flex-direction: column;margin: 0 20rpx;align-items: stretch;justify-content: space-around;">
						<view class="" style="color: white;font-weight: bold;">
							剩余
						</view>
						<view class="">
							<text style="color: #91DAFD;font-size: 12px;">NASY</text>
							<text> </text>
							<text style="color: #91DAFD;font-size: 14px;font-weight: bold;">{{model.remainingTokens || 0}}</text>
						</view>
					</view>

				</view>
			</view>
		</view>
		<!-- 		<view class="copyBoxBg " style="text-align: center;"  @click="goPay" >
			<image src="/static/home/bg.png"     />
		</view> -->


		<!-- 测试 -->
		<view class="" v-if="false">
			<!-- 2 -->
			<!-- <button @click="fakeLogin">fake login</button> -->
			// <button @click="getSolBalance">fake login</button>
		</view>
		<u-gap></u-gap>


		<!-- 邀请码 -->
		<view class="modelPopup">
			<uni-popup ref="popup" :mask-click="false" type="bottom" background-color="#fff">
				<view class="codeBox">
					<view class="code">邀请码绑定</view>
				</view>
				<view class="please">
					<input type="text" placeholder="请绑定邀请码" v-model="inviteCode" />
				</view>
				<view class="mustBox">
					<view class="must">*必须绑定邀请码才能进入第二阶段挖矿</view>
				</view>
				<view class="submitBox" @click="invitationCodeConfirm">
					<view class="submit">确认</view>
				</view>
				<view>
					<image src="/static/home/off.png" class="off" @click="off" />
				</view>
			</uni-popup>
		</view>



	</view>
</template>

<script>
	// 图片 
	// @import('/static/home/banner.png')
	// import banner from '/static/home/banner.png'


	import {
		setToken
	} from '@/utils/auth.js'
	import {
		Keypair
	} from "@solana/web3.js";
	import bs58 from "bs58"
	import nacl from "tweetnacl";
	import {
		icoratio,
		login,
		getStagesInfo,
		getMiningRewards,
		bindInviteCode,
		getHoldersRewards,
		authDeeplink
	} from '@/api/index.js'

	// 
	import {
		Connection,
		PublicKey
	} from "@solana/web3.js";
	// 使用 Solana 官方 RPC 节点
	// const connection = new Connection("https://api.mainnet-beta.solana.com");
	// https://dashboard.helius.dev/endpoints?projectId=a4010f16-27ec-4b93-80a8-dd78cde0d663
	const connection = new Connection("https://mainnet.helius-rpc.com/?api-key=2fadc3bb-fda2-4c57-af9d-8a164f73f022");
	export default {
		methods: {
			async icoratioApi() {
				console.log('icoratioApi handle');
				let res = await icoratio()
				if (res.code == 200) {
					// console.log(res,' icoratio api');
					this.model =  res.data
					this.model.all = 100;
					this.modelVale =  Number(this.model.all) - Number(this.model.remainingTokens);		
					this.hasexchange = Number(this.modelVale)/ Number(this.model.all)
				}
			},

			clearHandle() {
				console.log('clearHandle');
				uni.clearStorageSync()
			},

			// kong
			goKong() {
				console.log('kong');
				console.log(this.airdrop, 'airdrop');
				let airdrop = this.airdrop
				uni.navigateTo({
					url: `/pages/webView/webView?data=${airdrop}`
				})
			},

			// 邀请码
			goInvaint() {
				console.log('goInvaint');
				uni.navigateTo({
					url: '/pages/invited/invited'
				})
			},

			// IPC
			goPay() {
				/*  */
				uni.navigateTo({
					url: '/pages/icu/icu'
				})
			},


			// rpc 查询我的资产
			async getSolBalance() {
				if (this.solLimit) return
				try {
					const walletAddress = uni.getStorageSync('walletAddress')
					const publicKey = new PublicKey(walletAddress);
					const balance = await connection.getBalance(publicKey);
					console.log(balance, 'balance');
					if (balance) {
						this.solLimit = balance / 1e9
					} else {
						console.log('balance not exist');
					}
					console.log("SOL 余额:", balance / 1e9, "SOL"); // Solana 以 lamports 计数，需除以 1e9
				} catch (error) {
					console.error("查询 SOL 余额失败:", error);
				}
			},
			isString(value) {
				return typeof value === 'string';
			},
			hideMony() {
				if (!this.publicKey) return
				this.hideMonyShow = !this.hideMonyShow

				// this.getSolBalance()
			},
			formatTime(unit) {
				return unit < 10 ? '0' + unit : unit;
			},
			startRewardTimer() {
				clearInterval(this.intervalId); // 清除定时器
				this.intervalId = null;
				// 每隔 5 秒调用一次 getMiningRewardsApi
				this.intervalId = setInterval(() => {
					// 获取当前的时分秒
					// const now = new Date();
					// const hours = now.getHours();
					// const minutes = now.getMinutes();
					// const seconds = now.getSeconds();
					/*  */
					// this.hours = this.formatTime(hours)
					// this.minutes = this.formatTime(minutes)
					// this.seconds = this.formatTime(seconds)
					// const timeString = `${this.formatTime(hours)}:${this.formatTime(minutes)}:${this.formatTime(seconds)}`;
					// console.log(timeString,'timeString');
					// getMiningRewards

					// @查询持币奖励
					// this.getHoldersRewardsApi()

					// 查询算力挖矿奖励
					this.getMiningRewardsApi();
					// 查询阶段
					this.getStagesInfoApi();
				}, 1000); // 5000 毫秒 = 5 秒
				// }, 5000); // 5000 毫秒 = 5 秒

			},
			stopRewardTimer() {
				clearInterval(this.intervalId); // 清除定时器
				this.intervalId = null;
			},
			// 
			async getHoldersRewardsApi() {
				let res = await getHoldersRewards()
				// console.log(res, "res getHoldersRewardsApi");
				if (res.code == 200) {
					this.holdRewards.totalHolderReward = res.data.totalHolderReward
					this.holdRewards.perSecondReward = res.data.perSecondReward
					this.holdRewards.earnedRewards = res.data.earnedRewards
					this.holdRewards.pendingRewards = res.data.pendingRewards
					this.holdRewards.rank = res.data.rank
					this.holdRewards.differencePercentage = res.data.differencePercentage
				}
			},

			// 计算挖矿算力奖励
			async getMiningRewardsApi() {
				let res = await getMiningRewards()
				// console.log(res,'res getMiningRewards');
				if (res.data) {
					this.solLimit = res.data.balance
					this.earnedRewards = res.data.earnedRewards
					this.pendingRewards = res.data.pendingRewards
					this.perSecondReward = res.data.perSecondReward
					this.totalMiningReward = res.data.totalMiningReward
				}

			},
			// 查询阶段信息 
			async getStagesInfoApi() {
				let res = await getStagesInfo()
				// console.log(res, "res getStagesInfoApis");
				if (res.code == 200) {
					this.current_stage_number = res.data.current_stage_number
					this.airdrop = res.data.airdrop
					// console.log(res.data, "datadad");
					// console.log(res.data.remaining_time, 'res.data.remaining_time');
					if (res.data.remaining_time == null) return
					// console.log('2222');
					if (res.data.remaining_time.days) {
						this.remaining_days = res.data.remaining_time.days
					}
					if (res.data.remaining_time.hours) {
						this.hours = res.data.remaining_time.hours
					}
					if (res.data.remaining_time.minutes) {
						this.minutes = res.data.remaining_time.minutes
					}
					if (res.data.remaining_time.seconds) {
						this.seconds = res.data.remaining_time.seconds
					}
				}


				// console.log(this.remaining_days,"remaining_days");
				// console.log(res, 'getStagesInfo');
			},
			// 我的
			goUserInfo() {
				console.log('goUserInfo');
				uni.navigateTo({
					url: '/pages/claim/claim'
				})
			},
			// 获取当前的 Solana 钱包实例
			getSolana() {
				if (!window.solana?.isPhantom) {
					// alert("请安装 Phantom Wallet!");
					return null;
				}
				return window.solana;
			},
			// 确认邀请接口
			async bindInviteCodeApi() {
				const response = await bindInviteCode({
					inviteCode: this.inviteCode
				});
				if (response.code == 400) {
					uni.showToast({
						title: response.message,
						icon: 'none'
					})
				}
				if (response.code == 200) {
					uni.showToast({
						title: response.message,
						icon: 'none'
					})
				}
				console.log('12312', response);
			},
			// 确认邀请
			invitationCodeConfirm() {
				console.log('231');
				if (this.inviteCode) {
					this.bindInviteCodeApi()
				}
				this.off()
			},

			// 奖励记录
			rewardRecord() {
				uni.navigateTo({
					url: "/pages/rewardRecord/index"
				});
			},
			// 释放奖励
			releaseRecord() {
				uni.navigateTo({
					url: "/pages/releaseRecord/releaseRecord"
				});
			},
			off() {
				console.log('关闭弹框');
				this.$refs.popup.close();
			},
			open() {
				console.log('open');
				this.inviteCode = ''
				this.$refs.popup.open("center");
			},
			togglePopup() {
				return
				this.popupVisible = !this.popupVisible;
			},
			whitePopup() {
				this.popupVisible = false;
			},
			// 复制
			copyUrlHandle() {
				let that = this
				let invitedUrl = that.invitedUrl
				uni.setClipboardData({
					data: invitedUrl,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				});
			},
			// 方法用于格式化 publicKey 的显示
			formatPublicKey(key) {
				if (!key) return "";
				const start = key.slice(0, 4);
				const end = key.slice(-4);
				return `${start}...${end}`;
			},

			// 连接钱包
			ConnectYourWallet() {
				// #ifdef APP
				this.ConnectYourWalletByApp()
				// #endif
				// #ifdef H5
				this.ConnectYourWalletByH5()
				// #endif
			},
			/*  app  */
			async ConnectYourWalletByApp() {
				console.log('app');
				let res = await authDeeplink()
				console.log(res, "res");
				uni.setStorageSync('publicKey', res.publicKey)
				uni.setStorageSync('privateKey', res.privateKey)
				const appUrl = encodeURIComponent("http://cxc.firo.asia/#/"); // 用您的应用 URL 替换
				const encryptionPublicKey = uni.getStorageSync('publicKey'); // 替换为您的加密公钥
				// const redirectLink = encodeURIComponent("hbuilder://pages/index/index"); // 用您的回调 URL 替换
				const redirectLink = encodeURIComponent("cxc://pages/index/index"); // 用您的回调 URL 替换
				const cluster = 'devnet' // 默认是主网
				// mainnet-beta  testnet  devnet
				const phantomUrl =
					`https://phantom.app/ul/v1/connect?app_url=${appUrl}&dapp_encryption_public_key=${encryptionPublicKey}&redirect_link=${redirectLink}&cluster=${cluster}`;
				plus.runtime.openURL(phantomUrl); // 打开 Phantom 钱包进行连接
			},
			// 连接钱包 获取 签名 并且登录
			async ConnectYourWalletByH5() {
				console.log('h5');
				const resp = await window.solana.connect();
				const walletAddress = resp.publicKey.toBase58()
				uni.setStorageSync('walletAddress', walletAddress)
				this.publicKey = resp.publicKey.toString();
				// 2. 使用时间戳作为 nonce
				const nonce = Date.now().toString();
				this.nonce = nonce
				// 3. 对 nonce 进行签名
				const encodedMessage = new TextEncoder().encode(nonce);
				const {
					signature
				} = await window.solana.signMessage(encodedMessage, "utf8");
				// 4. 转换为 Base58 便于传输
				const signatureBase58 = bs58.encode(signature);
				let data = {
					address: this.publicKey,
					nonce,
					signature: signatureBase58
				}
				await this.loginApi(data);
			},
			// 登录接口
			async loginApi({
				address,
				nonce,
				signature
			}) {
				console.log('loginApiloginApiloginApi');
				let code = ''
				uni.getSystemInfo({
					success: function(res) {
						console.log(res.appName)
						code = res.deviceId
						console.log(code, 'code');
					}
				});
				console.log(uni.getSystemInfoSync(), "uni.getSystemInfoSync()");
				let data = null
				// #ifdef H5
				data = {
					address,
					nonce,
					signature,
					code: ''
				};
				// #endif
				// #ifdef APP
				data = {
					address,
					nonce,
					signature,
					code: code
				};
				// #endif
				console.log(data, 'login data');
				// 请求登录接口
				try {
					const response = await login(data); // 你的登录API方法
					// console.log("登录成功: 的女路", response);
					if (response.data) {
						uni.setStorageSync('publicKey', this.publicKey)
						uni.showToast({
							title: "钱包连接成功",
							icon: "success",
							duration: 2000,
						});
						setToken(response.data.token)
						// 持币奖励
						this.getHoldersRewardsApi()
						// 阶段
						this.getStagesInfoApi()
						// 开启定时其
						this.startRewardTimer()
						// 显示余额
						this.hideMony()
						// 获取兑换
						this.icoratioApi()
					}
					// 进一步处理登录成功的响应，例如保存 token 或跳转等
				} catch (error) {
					console.error("登录失败:", error);
				}
			},
			// 检查钱包是否已连接
			async checkWalletConnection() {
				const solana = this.getSolana();
				if (solana.isConnected) {
					try {
						// console.log(solana, "solana");
						// console.log(solana.publicKey.toString(), "solana");
						this.publicKey = solana.publicKey.toString();
						console.log("已连接钱包，公钥:", this.publicKey);
					} catch (error) {
						console.error("获取公钥失败:", error);
						throw error
					}
				} else {
					uni.showToast({
						title: '请链接钱包',
						icon: "none"
					})
					console.log('没有链接钱包');
				}
			},
		},
		onShow() {
			this.icoratioApi()
			this.getStagesInfoApi()
			clearInterval(this.intervalId); // 清除定时器
			this.intervalId = null;

			// #ifdef H5
			window.solana?.on('connect', () => {
				{
					this.publicKey = window.solana.publicKey.toString();
				}
			});
			// 判断 Phantom Wallet 是否存在
			if (!window.solana || !window.solana.isPhantom) {
				alert("请安装 Phantom Wallet!");
				console.log('提示安装插件');
				window.open("https://phantom.app/", "_blank");
			} else {
				console.log('检查练级');
				this.checkWalletConnection();
			}
			// #endif


			// console.log(this.publicKey, 'this.publicKey show');
			// #ifdef H5
			if (this.publicKey) {
				this.startRewardTimer()
				this.getStagesInfoApi()
				this.getHoldersRewardsApi()
			}
			// #endif
			// #ifdef APP
			// console.log('realypublicKey', uni.getStorageSync('realypublicKey'));
			this.publicKey = uni.getStorageSync('realypublicKey')
			if (this.publicKey) {
				this.startRewardTimer()
				this.getStagesInfoApi()
				this.getHoldersRewardsApi()
			}
			// #endif

		},
		onLaunch() {
			this.icoratioApi()
		},
		onHide() {
			this.stopRewardTimer();
		},
		onUnload() {
			// 页面卸载时清除定时器
			console.log('onUnload');
			this.stopRewardTimer();
		},
		computed: {
			// 通过计算属性返回包含 CSS 变量的样式对象
			customStyles() {
				return {
					'--difference-percentage': `${this.holdRewards.differencePercentage}%` // 设置 CSS 变量
				};
			},
			// 一阶段 50% 二阶段 100%
			customStageStyles() {
				if (this.current_stage_number == 1) {
					return {
						'--stage-percentage': '50%' // 设置 CSS 变量
					};
				} else if (this.current_stage_number == 2) {
					return {
						'--stage-percentage': '100%' // 设置 CSS 变量
					};
				}
			},
		},
		data() {
			return {
				/*  */
				// 1000 total 
				// 99 剩余
				// 已兑换 1000-99
			
				model: {
					"icoPDA": "",
					"programId": "",
					"all": 0,
					"tokenPrice": "",
					"solReceiver": "",
					"remainingTokens": 0,
					"mint": "",
					"contractTokenAccount": "",
					"userTokenAccount": ""
				},
				/* 环形图 */
				modelVale: 0,
				target: 50,
				/* 已经兑换 */
				hasexchange:0,
				

				// 轮播
				bannerList: [
					'/static/home/banner.png',
					'/static/home/banner.png'
				],
				// publicKey: uni.getStorageSync('publicKey'),
				publicKey: uni.getStorageSync('realypublicKey'),
				signature: null, // 签名
				nonce: null, // 随机数
				popupVisible: false,
				inviteCode: '', // 邀请码
				// 校验状态
				verificationResult: null,
				invitedUrl: "Http://sjdw.com",
				// sol余额
				solLimit: 0,
				// 阶段数 当前处于第一个阶段，剩余的时间是 23 天。
				current_stage_number: 0,
				remaining_days: 0,
				airdrop: "",
				// 时间
				hours: 0,
				minutes: 0,
				seconds: 0,
				//  计算挖矿
				earnedRewards: "----",
				pendingRewards: "----",
				perSecondReward: "----",
				totalMiningReward: "----",
				// 
				hideMonyShow: false,
				intervalId: null, // 用来存储定时器 ID
				// 持有币奖励
				holdRewards: {
					"totalHolderReward": "",
					"perSecondReward": "",
					"earnedRewards": "",
					"pendingRewards": "",
					"rank": "0",
					"differencePercentage": ""
				}
			};
		}
	};
</script>

<style scoped lang="scss">
	.copyBoxBg {
		width: 100%;
		height: 100%;
		background-image: url('/static/home/bg.png');
		background-size: cover;
		/* 图片自适应填充 */
		background-position: center center;
		/* 图片居中 */
		background-repeat: no-repeat;
		/* 不重复 */
	}


	.animated {
		// animation-duration: 2s;
		animation: zoomInOut 2s infinite;
		/* 循环动画 */
	}

	@keyframes zoomInOut {
		0% {
			transform: scale(1);
			/* 初始大小 */
		}

		50% {
			transform: scale(1.5);
			/* 放大到1.5倍 */
		}

		100% {
			transform: scale(1);
			/* 恢复原始大小 */
		}
	}


	.off {
		width: 60rpx;
		height: 60rpx;
		margin-left: 315rpx;
		margin-top: 100rpx;
	}

	.submitBox {
		width: 600rpx;
		height: 88rpx;
		background: #fcd434;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		margin-left: 45rpx;
		margin-top: 99rpx;

		.submit {
			font-weight: 500;
			font-size: 36rpx;
			color: #0d081a;
		}
	}

	.mustBox {
		margin-left: 31rpx;
		margin-top: 22rpx;

		.must {
			font-size: 24rpx;
			color: #999999;
		}
	}

	.please {
		width: 630rpx;
		height: 109rpx;
		background: #1f2630;
		border-radius: 30rpx;
		border: 1px solid #6c7680;
		margin-left: 30rpx;
		margin-top: 80rpx;

		input {
			font-size: 24rpx;
			color: #999999;
			margin-left: 32rpx;
			margin-top: 40rpx;
		}
	}

	.codeBox {
		margin-top: 39rpx;

		.code {
			font-weight: 500;
			font-size: 36rpx;
			color: #ffffff;
			text-align: center;
		}
	}

	::v-deep .uni-popup .uni-popup__wrapper {
		border-radius: 10px !important;
		background-color: #29313c !important;
		width: 695rpx;
		height: 600rpx;
	}

	.boxSix {
		width: 690rpx;
		// height: 577rpx;
		// background-image: url("/static//home/blue.png");
		background-color: #2A58FF;
		border-radius: 30rpx;
		background-size: 100%;
		margin: 30rpx;
		position: relative;

		.earnings {
			font-weight: 400;
			font-size: 36rpx;
			color: #ffffff;
			margin-left: 30rpx;
			padding-top: 30rpx;
		}

		.whitePic {
			width: 268rpx;
			height: 255rpx;
			position: absolute;
			top: 5%;
			left: 60%;
		}

		.dayBox {
			display: flex;
			align-items: center;
			margin-top: 60rpx;

			.day {
				margin-left: 57rpx;
				text-align: center;

				.math1 {
					font-weight: bold;
					font-size: 60rpx;
					color: #ffffff;
				}

				.math2 {
					font-weight: 400;
					font-size: 30rpx;
					color: #ffffff;
				}
			}

			.day2 {
				margin-left: 100rpx;
				text-align: center;

				.math3 {
					font-weight: bold;
					font-size: 60rpx;
					color: #ffffff;
				}

				.math4 {
					font-weight: 400;
					font-size: 30rpx;
					color: #ffffff;
				}
			}
		}

		.blueBox {
			display: flex;
			align-items: center;

			.oneDay {
				width: 120rpx;
				height: 130rpx;
				border-radius: 30rpx;
				border: 1px solid #738eff;
				text-align: center;
				margin-left: 45rpx;
				margin-top: 63rpx;

				.time1 {
					font-weight: bold;
					font-size: 72rpx;
					color: #ffffff;
				}

				.time2 {
					font-weight: 300;
					font-size: 24rpx;
					color: #ffffff;
				}
			}

			.twoDay {
				width: 120rpx;
				height: 130rpx;
				border-radius: 30rpx;
				border: 1px solid #738eff;
				text-align: center;
				margin-left: 42rpx;
				margin-top: 63rpx;

				.time1 {
					font-weight: bold;
					font-size: 72rpx;
					color: #ffffff;
				}

				.time2 {
					font-weight: 300;
					font-size: 24rpx;
					color: #ffffff;
				}
			}

			.threeDay {
				width: 120rpx;
				height: 130rpx;
				border-radius: 30rpx;
				border: 1px solid #738eff;
				text-align: center;
				margin-left: 42rpx;
				margin-top: 63rpx;

				.time1 {
					font-weight: bold;
					font-size: 72rpx;
					color: #ffffff;
				}

				.time2 {
					font-weight: 300;
					font-size: 24rpx;
					color: #ffffff;
				}
			}

			.fourDay {
				width: 120rpx;
				height: 130rpx;
				border-radius: 30rpx;
				border: 1px solid #738eff;
				text-align: center;
				margin-left: 40rpx;
				margin-top: 63rpx;

				.time1 {
					font-weight: bold;
					font-size: 72rpx;
					color: #ffffff;
				}

				.time2 {
					font-weight: 300;
					font-size: 24rpx;
					color: #ffffff;
				}
			}
		}

		.intoBox {
			width: 580rpx;
			height: 8rpx;
			// background: #59cf6f;
			// background: red;
			// background: linear-gradient(to right, #7EDB6A 50%, #001EAE 50%);
			background: linear-gradient(to right, #7EDB6A var(--stage-percentage), #001EAE 0%);

			border-radius: 4rpx;
			margin: 0 auto;
			position: relative;

			.chestBlue {
				position: absolute;
				top: -300%;
				left: 40%;
				width: 68rpx;
				height: 58rpx;
			}

			.chestRed {
				position: absolute;
				top: -350%;
				left: 90%;
				width: 75rpx;
				height: 61rpx;
			}
		}
	}

	.copyBox {
		padding-bottom: 20rpx;
	}

	.copyBox1 {
		width: 690rpx;
		height: 88rpx;
		background: #1f2630;
		border-radius: 44rpx;
		border: 1px solid #ffffff;
		display: flex;
		align-items: center;
		margin: 30rpx;

		.copy1 {
			font-weight: 300;
			font-size: 30rpx;
			color: #ffffff;
			margin-left: 20rpx;
		}

		.copy2 {
			font-weight: 300;
			font-size: 30rpx;
			color: #ffffff;
			margin-left: 140rpx;
		}

		.copy3 {
			width: 29rpx;
			height: 36rpx;
			margin-left: 30rpx;
		}
	}

	.boxFive {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;

		.force {
			font-weight: 400;
			font-size: 36rpx;
			color: #ffffff;
			margin-left: 30rpx;
		}

		.force1 {
			font-weight: 300;
			font-size: 24rpx;
			color: #ffffff;
			margin-right: 30rpx;
		}
	}

	.progress-container {
		width: 120rpx;
		height: 8rpx;
		// background-color: #df750b;
		background: linear-gradient(to right, #E2770D var(--difference-percentage), #2B323D 0%);
		// background-color: hsl(var(--difference-percentage), 100%, 50%);
		/* 背景颜色基于差异百分比 */

		/* 渐变背景，左半部分是绿色，右半部分是橙色 */
		border-radius: 25px;
		overflow: hidden;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.boxFour {
		width: 690rpx;
		height: 141rpx;
		background: #1f2630;
		border-radius: 30rpx;
		border: 1px solid #ffffff;
		margin-left: 30rpx;
		margin-top: 22rpx;

		.fourLeft {
			display: flex;
			font-weight: 300;
			font-size: 24rpx;
			color: #999999;
			margin-top: 22rpx;
			margin-left: 30rpx;

			.fourTwo {
				// width: ;
				margin-left: 58rpx;
			}

			.fourThree {
				// width: ;
				margin-left: 74rpx;
			}

			.fourPut {
				// width: ;
				margin-left: 70rpx;
			}

			.fourFive {
				margin-left: 50rpx;
			}
		}

		.fourRight {
			display: flex;
			font-weight: 300;
			// font-size: 36rpx;
			font-size: 30rpx;
			color: #ffffff;
			// margin-left: 20rpx;
			// justify-content: space-around;
			width: 640rpx;
			margin: 0 auto;

			.fourOne {
				width: 68rpx;
				height: 43rpx;
			}

			.fourTwo {
				text-align: center;
				width: 30%;
				// width: 92rpx;
				// margin-left: 30rpx;
			}

			.fourThree {
				width: 30%;
				text-align: center;
				// width: 92rpx;
				// margin-left: 25rpx;
			}

			.fourPut {
				width: 30%;
				text-align: center;
				// width: 92rpx;
				// margin-left: 25rpx;
			}

			.fourFive {
				width: 20%;
				// margin-left: 50rpx;
			}
		}
	}

	.boxThree {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;

		.Rewards {
			font-weight: 400;
			font-size: 36rpx;
			color: #ffffff;
			margin-left: 30rpx;
		}

		.Rewards1 {
			font-weight: 300;
			font-size: 24rpx;
			color: #ffffff;
			margin-right: 30rpx;
		}
	}

	.boxTwo {
		display: flex;
		align-items: center;

		.zeroBox {
			margin-left: 30rpx;

			.zero {
				font-weight: bold;
				font-size: 72rpx;
				color: #ffffff;
			}
		}

		.zero1 {
			display: flex;
			align-items: center;
			margin-left: 114rpx;

			.c {
				font-weight: 300;
				font-size: 24rpx;
				color: #ffffff;
			}

			.down1 {
				width: 10rpx;
				height: 10rpx;
				margin-left: 10rpx;
			}
		}
	}

	.content {
		width: 100vw;
		min-height: 100vh;
		background: #1f2630;
	}

	.headerBox {
		display: flex;
		align-items: center;
		padding-top: 40rpx;
	}

	.leftBox {
		display: flex;
		align-items: center;
		margin-left: 16rpx;
	}

	.oneImage {
		width: 129rpx;
		height: 129rpx;
	}

	.hello {
		font-weight: 800;
		font-size: 36rpx;
		color: #ffffff;
		line-height: 64rpx;
	}

	.rightBox {
		width: 270rpx;
		height: 80rpx;
		background: rgba(108, 118, 128, 0);
		border-radius: 40rpx;
		border: 1px solid #ffffff;
		margin-left: 144rpx;
	}

	.address {
		font-weight: 300;
		font-size: 24rpx;
		color: #ffffff;
		line-height: 80rpx;
		text-align: center;
		// margin-left: 60rpx;
		margin-left: 20rpx;
	}

	.lang {
		display: flex;
		align-items: center;
		// 
		justify-content: space-around;
	}

	.addressBox {
		display: flex;
		align-items: center;
		position: relative;
	}

	.swystem {
		display: flex;
		align-items: center;
	}

	.address1 {
		font-weight: 400;
		font-size: 24rpx;
		color: #ffffff;
		line-height: 64rpx;
		margin-left: 13rpx;
	}

	.twoImage {
		width: 17rpx;
		height: 9rpx;
		margin-left: 10rpx;
	}

	.swystemBox {
		width: 690rpx;
		height: 80rpx;
		background: #1f2630;
		border-radius: 40rpx;
		border: 1px solid #ffffff;
		margin-top: 25rpx;
		margin-left: 30rpx;
	}

	.threeImage {
		width: 36rpx;
		height: 32rpx;
		margin-left: 30rpx;
	}

	.swystem1 {
		font-weight: 500;
		font-size: 30rpx;
		color: #fcd434;
		line-height: 70rpx;
		margin-left: 15rpx;
	}

	.popup {

		width: 135px;
		height: 133px;
		position: absolute;
		top: 130%;
		left: -185%;
		right: 0%;
		bottom: 0;

		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9;
	}

	.popup-content {
		width: 270rpx;
		// height: 267rpx;
		// height: 187rpx;
		height: 167rpx;
		background: #1f2630;
		border-radius: 10rpx;
		border: 1px solid #ffffff;
		border-radius: 5px;
		text-align: center;
	}

	.language-option {
		margin: 10px 0;
		cursor: pointer;
	}

	.language-option:hover {
		color: #6495ed;
	}

	.china {
		font-weight: 300;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 64rpx;
		margin-top: 30rpx;
	}

	.en {
		font-weight: 300;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 64rpx;
	}

	.langOne {
		font-weight: 300;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 64rpx;
	}

	.banner1 {
		width: 690rpx;
		height: 375rpx;
		margin: 30rpx;
	}

	.myBox {
		display: flex;
		align-items: center;
		margin-left: 30rpx;

		.my {
			font-weight: 300;
			font-size: 36rpx;
			color: #ffffff;
		}

		.eyes {
			width: 35rpx;
			height: 26rpx;
			margin-left: 30rpx;
		}
	}
</style>